<template>
<div class="job_bd">
    <div class="job_banner">
        <img :src="jobs.zhao_banner">
    </div>
    <div class="jobs">
        <loading :isOpen="isOpen"></loading>
        
        <div class="position_item" v-for="item in jobsDetail" v-if="jobsDetail.length!=0">
            <div class="position">
            <p class="demand_top">
                <span>{{item.job_name}}</span>
                <a :href="'mailto:'+item.email">投递简历</a>
            </p>
            <p class="position_demand">
                <span>学历 : {{item.job_edu}}</span>
                <span>工作经验 : {{item.job_year}}</span>
                <span>薪资 : {{item.job_salary}}</span>
                <span>工作性质 : {{item.job_type}}</span>
                <span>发布日期 : {{item.create_time}}</span>
                <span>工作地点 : {{item.job_city}}</span>
                <span>招聘人数 : {{item.job_person}}</span>
            </p>
            </div>
            <div class="position_responsibility">
                <p class="item_name">岗位职责</p>
                <div class="respon_cont" v-html="item.job_detail">
                    
                </div>
            </div>
            <!-- <div class="position_addr">
                <p class="item_name">工作地点</p>
                <div class="respon_cont">
                    {{item.job_city}}
                </div>
            </div> -->
        </div>
        <div class="no_job" v-if="jobsDetail.length==0">
          <img src="../assets/no_job.png">
          <p>暂无招聘</p>
        </div>
    </div>
</div>
</template>
<script>
import loading from "./Loading";
export default {
  data() {
    return {
      jobs: [],
      isOpen: true,
      com_id: localStorage.getItem("companyid"),
      company_name: [],
      jobsDetail:[]
    };
  },
  components: { loading },
  mounted() {
    var self = this;
    setTimeout(function() {
      var com_id = localStorage.getItem("companyid");
      self.com_id = com_id;
      self.loaddetail();
      console.log("job_content");
    }, 400);
    self.loadJobs();
  },
  methods: {
    loaddetail() {
      this.$http
        .get("http://thy.588net.com/index.php/api/Company/get_company_index?" +"&company_id=" +this.com_id )
        .then(function(res) {
          this.jobs = res.body.data.company;
          this.company_name = res.body.data.company.name;
          document.title = "招贤纳士-" + this.company_name;
        });
    },
    loadJobs() {
        var page=1;
      this.$http
        .get("http://thy.588net.com/index.php/api/Job/getList?" +"company_id=" +this.com_id+'&page='+page+'&page_size='+10 )
        .then(function(res) {
            console.log(res.body.data)
         this.jobsDetail = res.body.data;
          this.isOpen = false;
        });
    },
    postss(){
        window.location.href='mailto:1561043491@qq.com'
    }
  },
  activated: function() {
    console.log("job_ac");
    $(".is-active").removeClass("is-active");
    var self = this;
    setTimeout(function() {
      self.loaddetail();
    }, 600);
  }
};
</script>

<style>
.zhao li {
  list-style: none;
}
</style>

<style scoped>
.no_job{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  min-height:350px;
  background:#fff;
}
.no_job img{
  margin-bottom:20px;
  vertical-align:bottom;
  width:100px;
  height:100px;
}
.no_job p{
  color:#a5a5a5;
  font-size:20px;
}
.item_name {
  height: 44px;
  line-height: 44px;
  color: #5a5a5a;
  font-size: 18px;
  margin: 10px 0;
}
.position_demand {
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  color: #a5a5a5;
}
.position_demand span {
  display: block;
  float: left;
  margin-right: 40px;
}
.position_item {
  padding: 20px;
  background: #fff;
  margin-bottom: 20px;
  box-shadow: 0px 0px 6px 0px #d8d8d8;
}

.position {
  border-bottom: 1px solid #d8d8d8;
}
.demand_top {
  height: 44px;
  line-height: 44px;
  overflow: hidden;
}
.demand_top span {
  display: block;
}
.demand_top span:nth-of-type(1) {
  float: left;
  color: #5a5a5a;
  font-size: 18px;
}
.demand_top a {
display:block;
  float: right;
  height: 36px;
  line-height: 36px;
  margin-top: 4px;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  background: #2277ff;
  padding: 0 20px;
  text-decoration:none;
  cursor: pointer;
}
.respon_cont {
  color: #a5a5a5;
}

.zhao {
  background: #fff;
  padding: 20px;
  box-shadow: 0px 0px 6px 0px #d8d8d8;
  margin: 2px 0;
  min-height: 300px;
}
.jobs {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
}
.job_banner {
  max-width: 1200px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
}
.job_banner img {
  width: 100%;
  height: 200px;
}
</style>

